<template>
    <div class="app-container" v-loading="loadings">
        <el-row>
            <el-col :span="4">
                <div class="marginTB alignRight labelLeft">提取余额到银行卡</div>
            </el-col>
            <el-col :span="20">
                <div class="marginTB conl fl">
                    余额
                    <span class="red">{{avlBal}}</span>
                    元
                </div>
                <div class="conr fr alignRight">
                    <el-button type="text" @click="toRoutes('bankCardAdd')">添加银行卡</el-button>
                    <el-button type="text" @click="toRoutes('assetsReport')">资产明细</el-button>
                </div>
            </el-col>
            <div style="margin:20px 0;float:left;width:100%">
                <el-col :span="4">
                    <div class="marginTB alignRight labelLeft fontSize14">选择银行卡</div>
                </el-col>
                 <!-- v-if="bankCardList.length>0" -->
                <el-col :span="20" v-if="bankCardList.length>0">
                    <div class="radioCon">
                        <div class="marginTB" v-for="(e,index) in bankCardList" :key="index">
                            <el-radio v-model="radios" :label="e.cardId" border>
                                {{e.bankName}}&emsp;
                                尾号：{{e.bankTailNum}}&emsp;
                                户名：{{e.username}}
                            </el-radio>
                        </div>
                    </div>
                </el-col>
                <el-col :span="20" v-else style="margin-top: 10px;font-size: 14px;">
                    <span class="spanToInput">暂无可选择银行卡</span>
                </el-col>
            </div>
            <el-col :span="4">
                <div class="marginTB alignRight labelLeft fontSize14">提现金额</div>
            </el-col>
            <!-- 对私 -->
            <el-col :span="20" v-if="flagSE">
                <el-input type="number" style="width:160px" v-model.number="flagMoney" placeholder="请输入提现金额"></el-input>
                <span class="color">元</span>
                <p class="titlep">收取0.5元/笔的手续费</p>
            </el-col>
            <!-- 对公 -->
            <div v-else>
                <el-col :span="20">
                    <el-input type="number" style="width:160px" v-model.number="flagMoney" placeholder="请输入提现金额"></el-input>
                    <span class="color">元</span>
                    <p class="titlep">收取1元/笔的手续费</p>
                </el-col>
                <el-col :span="4">
                    <div class="marginTB alignRight labelLeft fontSize14">到账通知手机号</div>
                </el-col>
                <el-col :span="20">
                    <el-input style="width:160px;margin-bottom:20px" v-model="mobileId" placeholder="请输入手机号码"></el-input>
                </el-col>
            </div>
             <el-col :span="4">
                <div class="marginTB alignRight labelLeft fontSize14">备注</div>
            </el-col>
            <el-col :span="20">
                <el-input style="width:160px" v-model="remark" placeholder="请输入备注"></el-input>
            </el-col>
            <el-col :span="24">
                <el-button
                    style="display: table;margin: 0 auto;margin-top: 40px;"
                    type="primary"
                    @click="submitFn(flagSE,radios)"
                >立即提交</el-button>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import withdrawal from "@/api/withdrawal";
export default {
    name: "withdrawalIndex",
    data() {
        return {
            loadings:true,
            radios: null,
            avlBal: "12138.00",
            bankCardList:[],
            flagSE: null,
            flagMoney: null,
            remark:null,
            mobileId:null
        };
    },
    watch: {
        radios(e) {
            this.bankCardList.forEach(es => {
                if (es["cardId"] == e) {
                    this.flagSE = Boolean(Number(es.type))
                }
            });
        }
    },
    inject:["reload"],
    mounted(){
        this.getWithdrawalInfo()
    },
    methods: {
        // 获取提现
        getWithdrawalInfo(){
            let datas = {
                id:String(this.$store.state.user.hospitalId) 
            }
            withdrawal
                .getWithdraw(datas)
                .then(res => {
                    if (!res.data.code) {
                        let resData = res.data.data
                        this.avlBal = Number(resData.avlBal)
                        let rb = resData.bankCardResponseDTOList
                        if(rb){
                            if(rb.length>0){
                                this.bankCardList = rb
                                this.radios = this.bankCardList[0].cardId
                                this.flagSE = Boolean(Number(this.bankCardList[0].type))
                            }
                        }
                    } else {
                        this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                    this.loadings = false
                })
                .catch(err => {
                    this.errorStatus(err);
                    this.loadings = false
                });
        },
        // 提交
        submitFn(e, radios) {
            if(!this.remark){
                this.errorStatus("备注不能为空！")
            }else if (Number(this.flagMoney) > 1) {
                if (Number(this.avlBal) >= Number(this.flagMoney)) {
                    let money;
                    let card,gateId,bankName,bankCard,bankCardTailNum,bankAccountName
                    this.bankCardList.forEach(es => {
                        if (es["cardId"] == radios) {
                            card = es.bankTailNum;
                            gateId = es.gateId;
                            bankName = es.bankName
                            bankCard = es.bankCard
                            bankCardTailNum = es.bankTailNum
                            bankAccountName = es.username
                        }
                    });
                    let datas = {
                        targetId:String(this.$store.state.user.hospitalId),
                        amount:String(this.flagMoney.toFixed(2)),
                        remark:this.remark,
                        gateId:gateId,
                        bankName:bankName,
                        bankCard:bankCard,
                        bankCardTailNum:bankCardTailNum,
                        bankAccountName:bankAccountName
                    }
                    if (e) {
                        // 对私
                        money = Number(this.flagMoney) - 0.5;
                    } else {
                        // 对公
                        money = Number(this.flagMoney) - 1;
                        datas["mobileId"] = this.mobileId
                    }
                    // console.log(datas)
                    let defineFn = () => {
                        // let datas = { id: String(e) };
                        withdrawal
                            .withdrawSubmit(datas)
                            .then(res => {
                                if (!res.data.code) {
                                    this.reload();
                                    this.succStatus("提现成功");
                                } else {
                                    this.$message({
                                        showClose: true,
                                        message: res.data.msg,
                                        type: "warning"
                                    });
                                }
                            })
                            .catch(err => {
                                this.errorStatus(res.msg);
                            });
                    };
                    let confirmDatas = {
                        desc: "将提现" + (money.toFixed(2)) + "元至银行卡" + card,
                        title: "提示",
                        confirmBtnTxt: "确定",
                        cancelBtnTxt: "取消",
                        fn: defineFn,
                        catchInfo: "已取消"
                    };
                    // this.eleConfirm(confirmDatas);
                    // 判断是否有可选择银行卡
                    if(this.bankCardList.length>0){
                        this.eleConfirm(confirmDatas);
                    }else{
                        this.errorStatus("暂无可选择银行卡，请先去添加银行卡");
                    }
                } else {
                    this.errorStatus("提现金额不能大于余额！");
                }
            }else {
                this.errorStatus("提现金额要大于1");
            }
        },
        // 路由跳转
        toRoutes(e, userId) {
            let route = {
                name: e,
                query: { userId: JSON.stringify(userId) }
            };
            this.$router.push(route);
        },
        //confirm框
        eleConfirm(e) {
            this.$confirm(e.desc, e.title, {
                confirmButtonText: e.confirmBtnTxt,
                cancelButtonText: e.cancelBtnTxt,
                //type: "warning"
            })
                .then(() => {
                    e.fn();
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: e.catchInfo
                    });
                });
        },
        //成功状态弹窗
        succStatus(txt, status) {
            this.eleMsg(txt, "success");
        },
        //失败状态弹窗
        errorStatus(txt) {
            this.eleMsg(txt, "error");
        },
        //弹窗组件
        eleMsg(txt, status) {
            this.$message({
                showClose: true,
                message: txt,
                type: status
            });
        }
    }
};
</script>
<style scope>
.labelLeft {
    margin-right: 20px !important;
    color: #606266;
    font-weight: 700;
}
.marginTB {
    margin: 10px 0;
    color: #606266;
}
.conl,
.conr {
    width: 50%;
    display: inline-block;
}
.fontSize14 {
    font-size: 14px;
}
.red {
    color: red;
}
.titlep {
    font-size: 12px;
    color: #606266;
    margin-top: 8px;
    margin-bottom: 20px
}
.color {
    color: #606266;
}
.radioCon > div:first-child {
    margin-top: 0;
}
</style>